<template>
	<view class="integralBuy">
		<view class="address cu-list menu-avatar margin-bj radius-bock">
			<view class="cu-item">
				<view class="cu-avatar round wanl-bg-orange"><text class="wlIcon-weizhi1"></text></view>
				<view class="content" v-if="addressData.address" @tap="userAddress()">
					<view>
						<text class="wanl-pip margin-right-sm">{{ addressData.name }}</text>
						<text class="wanl-gray-light text-sm">{{ addressData.mobile }}</text>
					</view>
					<view class="text-sm wanl-pip text-cut">{{ addressData.province}} {{ addressData.city }}
						{{ addressData.district }} {{ addressData.address }}
					</view>
				</view>
				<view class="content" @tap="addAddress('newadd')" v-else>
					<view class="text-sm wanl-pip text-cut">点击此处填写收货地址</view>
				</view>
				<view class="action"><text class="wlIcon-fanhui2 text-lg"></text></view>
			</view>
		</view>
		<view class="pl22 pr22">
			<view class="mt28">
				<view class="orderDatas flex" v-for="(item,index) in orderData.list" :key="index">
					<image class="imggoods" :src="$wanlshop.oss(item.image)" mode=""></image>
					<view class="ml20 mt4 flex1">
						<view class="f28 c3d fb overflow_1">
							{{item.title}}
						</view>
						<view class="info flex_sb mt12">
							<view>{{item.description}}</view>
							<view class="">
								X1
							</view>
						</view>
						<view class="flex_sb mt62">
							<view class="cFA750C fb">
								{{item.price}} 积分
							</view>
							<view class="f28 c3d">
								快递包邮
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mt28">
				<view class="orderDatas f28 fb">
					订单查询：在积分商城-兑换记录中查看
				</view>
			</view>
			<view class="mt28">
				<view class="orderDatas f28 fb">
					积分详情：需要花费{{orderData.list[0].price}}积分，当前您剩余{{userInfo.score}}积分
				</view>
			</view>
		</view>
		<view class="btnSub mt20">
			<button class="btn" @click="submit">确定支付</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				addressData: {},
				orderData: {},
				optionData: {
					goods_id: '',
					number: "1",
				},
			}
		},
		onLoad(data) {
			console.log(data);
			this.optionData.goods_id = data.id
			this.loadData(null, 'onload')
			this.userScore()
		},
		methods: {
			userScore() {
				this.$api.get({
					url: "/jmy/user/score",
					data: {},
					success: res => {
						this.userInfo = res
					}
				})
			},
			submit() {
				uni.showModal({
					title: '确定兑换?',
					content: '兑换后不可退货，发货后不可取消',
					success: res => {
						if (res.confirm) {
							this.$api.post({
								url: '/wanlshop/score/pay',
								data: {
									data: [this.optionData],
									address_id: this.addressData.id,
									address: this.$wanlshop.address
								},
								success: res => {
									uni.showToast({
										title: '已兑换成功,可在兑换记录中查看',
										icon: 'none'
									})
									setTimeout(() => {
										uni.navigateBack({
											delta: 2
										})
									}, 1500)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}

					},

				})

			},
			async loadData(address_id, type) {
				console.log(address_id);
				this.$api.post({
					url: '/wanlshop/score/getOrderGoodsList',
					loadingTip: '加载中',
					data: {
						data: [this.optionData],
						address_id: address_id,
						address: this.$wanlshop.address
					},
					success: res => {
						if (res.info) {
							this.userAddress();
						} else {
							this.token = res.token;
							this.orderData = res.orderData;
							if (res.addressData) {
								this.addressData = res.addressData;
								this.ts = (new Date()).getTime();
							} else {
								this.addAddress('newadd');
							}
						}
					}
				});
			},
			userAddress() {
				this.$wanlshop.to('/pages/user/address/address?source=1');
			},

		}
	}
</script>

<style lang="scss" scoped>
	.btnSub {
		padding-bottom: env(safe-area-inset-bottom);
		width: 100vw;
		height: 98rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		z-index: 2;

		.btn::after {
			border: none;
		}

		.btn {
			width: 600rpx;
			height: 62rpx;
			background: #F6710A;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;

			button {
				background: #F6710A;
			}
		}
	}

	.orderDatas {
		padding: 38rpx 34rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;

		.cFA750C {
			color: #FA750C
		}

		.mt62 {
			margin-top: 62rpx;
		}

		.imggoods {
			width: 200rpx;
			height: 200rpx;
			border-radius: 12rpx;
		}
	}
</style>